<template>
	<view class="app-public-msg-detail-tool">
		<view class="app-public-msg-detail-tool__body">
			<view class="app-public-msg-detail-tool__item " @tap="sendImg">
				<view class="app-public-msg-detail-tool__item__box bg-f7">
					<load-image :mobile="false" :size="['50rpx','48rpx']" src="/pages/public/static/msg/img.png" />
				</view>
				<view class="app-public-msg-detail-tool__item__txt">
					<text class="c-regular e-font-22">{{toI18('public.album')}}</text>
				</view>
			</view>
			<view class="app-public-msg-detail-tool__item " @tap="orderPopupShow = true">
				<view class="app-public-msg-detail-tool__item__box bg-f7">
					<load-image :mobile="false" :size="['48rpx']" src="/pages/public/static/msg/order.png" />
				</view>
				<view class="app-public-msg-detail-tool__item__txt">
					<text class="c-regular e-font-22">{{toI18('public.order')}}</text>
				</view>
			</view>
			<view class="app-public-msg-detail-tool__item " @tap="goodsPopupShow = true">
				<view class="app-public-msg-detail-tool__item__box bg-f7">
					<load-image :mobile="false" :size="['48rpx']" src="/pages/public/static/msg/goods.png" />
				</view>
				<view class="app-public-msg-detail-tool__item__txt">
					<text class="c-regular e-font-22">{{toI18('public.goods')}}</text>
				</view>
			</view>
		</view>
		<order-popup :primary="primary" :unitEn="unitEn" :storeId="user" :show="orderPopupShow" @send="handlSendOrder" @close="orderPopupShow = false"  />
		<goods-popup :primary="primary" :unitEn="unitEn" :storeId="user" :show="goodsPopupShow" @send="handlSendGoods" @close="goodsPopupShow = false"  />
		
		
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	// #ifndef APP-NVUE
	import IM from '@/common/utils/IM/IM'
	import {
		useI18n
	} from '@/common/hooks'
	// #endif
	import orderPopup from './orderPopup.vue'
	import goodsPopup from './goodsPopup.vue'
	import {uploadIMFilePath} from '@/common/request/api'
	import type {IMOrderItem,GoodsItem} from '@/common/request/api'
	import {sendOrder,sendGoods} from '../utils'
	import { chooseImage } from '@/common/utils';
	
	
	const props = defineProps<{
		user:string,
		unitEn:string
		primary:string
	}>()
	
	// #ifdef APP-NVUE
	const IM = getApp().globalData.IM
	const toI18 = getApp().globalData.$t
	// #endif
	// #ifndef APP-NVUE
	const toI18 = useI18n('')
	// #endif
	

	
	const sendImg = () => {
		chooseImage({
			count:9
		}).then(async res => {
			if (res) {
				for(let item of  res.tempFiles){
					await uploadIMFilePath(item.tempFilePath,{chatlinkid:props.user})
					
				}
			}
		})

	}
	
	const orderPopupShow = ref(false)
	
	const handlSendOrder = (order:IMOrderItem) => {
		orderPopupShow.value = false
		sendOrder(IM,props.user,props.unitEn,order)

	}
	const goodsPopupShow = ref(false)
	const handlSendGoods = (goods:GoodsItem) => {
		goodsPopupShow.value = false
		sendGoods(IM,props.user,props.unitEn,goods)
		
	}
	
	defineExpose({
		handlSendOrder,
		handlSendGoods
	})
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-tool) {
		@include appBem_e(body){
			@include flex;
			align-items: center;
			height: 110px;
		}
		@include appBem_e(item) {
			width: 187rpx;
			padding: 0 36rpx;
			&__box{
				flex: 1;
				align-items: center;
				justify-content: center;
				padding: 34rpx 0;
				margin-bottom: 14rpx;
				border-radius: 20rpx;
			}
			&__txt{
				flex: 1;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>